import React, { useEffect, useState } from 'react'
import { Button, Form, Input, Card, Space, Table, Tag } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import './index.css'
import { reqHospitalSet } from '@api/hospital/hospitalSet/index'
import {
  IhospitalSetList,
  IhospitalSet,
} from '@api/hospital/hospitalSet/model/hospitalSetsTypes'
import { current } from '@reduxjs/toolkit'
import { useNavigate } from 'react-router-dom'

const columns: ColumnsType<IhospitalSet> = [
  {
    title: '序号',
    // dataIndex: 'name',
    render: (text, record, index) => index + 1,
    align: 'center', //让这一列水平居中
    width: 80,
  },
  {
    title: '医院名称',
    dataIndex: 'hosname',
  },
  {
    title: '医院编号',
    dataIndex: 'hoscode',
  },
  {
    title: 'api基础路径',
    dataIndex: 'apiUrl',
  },
  {
    title: '签名',
    dataIndex: 'signKey',
  },
  {
    title: '联系人姓名',
    dataIndex: 'contactsName',
  },
  {
    title: '联系人手机',
    dataIndex: 'contactsPhone',
  },
  {
    title: '操作',
    render: (_, record) => (
      <Space size="small">
        <Button icon={<EditOutlined />} type="primary"></Button>
        <Button icon={<DeleteOutlined />} type="primary" danger></Button>
      </Space>
    ),
    fixed: 'right', //这一列固定在右侧
    width: 120, //控制这一列的宽度是120px
  },
]

//定义一个全局变量用来记录是否点击了查询
let flag = false //假设flag为false，就是没有点击查询按钮或者点击了清空，如果flag为true，就是点击了查询按钮

export default function HospitalSet() {
  const [hospitalSets, sethospitalSets] = useState<IhospitalSetList>([])
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)

  const navigate = useNavigate()

  //操作表单的步骤
  // 1.利用Form.useForm()这个hook创建form实例对象
  const [form] = Form.useForm()
  // 2.使用form实例对象和Form组件进行绑定
  // 3.利用form实例操作表单
  // console.log(form.getFieldsValue())

  useEffect(() => {
    //在组件挂载的时候，调用函数获取表格最新数据
    fetch(page, pageSize)
  }, [])

  // 获取表格分页数据的函数
  async function fetch(page: number, pageSize: number) {
    //点击了查询按钮后，请求数据要有hosname和hoscode，如果没有点击查询，或者点击了清空，则发送请求没有hosname和hoscode
    let result
    if (flag) {
      let { hosname, hoscode } = form.getFieldsValue()
      //flag为true 请求需要传入hosname和hoscode
      result = await reqHospitalSet(page, pageSize, hosname, hoscode)
    } else {
      result = await reqHospitalSet(page, pageSize)
    }
    // console.log(result)
    sethospitalSets(result.records)
    setTotal(result.total)
  }
  const onFinish = (values: any) => {
    //点击查询后修改flag为true，并重新按查询要求渲染页面和页码
    flag = true
    //只要查询了之后，不管怎样，都得让页码从第一页高亮
    setPage(1)
    //只要时点击了查询，一定要从第一页开始
    fetch(1, pageSize)
  }

  // const onFinishFailed = (errorInfo: any) => {
  //   flag = false
  //   setPage(1)
  //   fetch(1, pageSize)
  // }
  return (
    <Card>
      <Form
        layout="inline"
        name="basic"
        form={form} //使用form实例对象和Form组件进行绑定
        initialValues={{ remember: true }}
        onFinish={onFinish} //当表单中的提交按钮点击之后并且表单校验通过，则触发
        // onFinishFailed={onFinishFailed} //当表单中提交按钮点击之后。并且表单校验不通过，则触发
      >
        <Form.Item
          // label="Username" //设置表单项的文本
          name="hosname" //当前表单项的名称
          //这个rules属性,是定义当前表单的校验规则,required:true 表达当前表单项为必填项,message表示表单校验不通过时的提示信息
          // rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input
            placeholder="医院名称"
            onChange={() => {
              flag = false
              fetch(page, pageSize)
            }}
          />
        </Form.Item>

        <Form.Item
          // label="Password"
          name="hoscode"
          // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          {/* <Input.Password /> */}
          <Input
            placeholder="医院编码"
            onChange={() => {
              flag = false
              fetch(page, pageSize)
            }}
          />
        </Form.Item>

        {/* wrapperCol={{ offset: 8, span: 16 }}  offset:8表示当前组件,左侧偏移8份的距离 */}
        <Form.Item>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button
            onClick={() => {
              flag = false
              form.setFieldsValue({ hosname: '', hoscode: '' })
              fetch(page, pageSize)
              setPage(1)
            }}
          >
            清空
          </Button>
        </Form.Item>
      </Form>

      <div style={{ marginTop: 20 }}>
        <Button
          type="primary"
          className="add-but"
          onClick={() => {
            navigate('/syt/hospital/hospitalSet/add')
          }}
        >
          添加
        </Button>
        <Button type="primary" danger disabled>
          批量删除
        </Button>
        {/* 
        columns:决定了表格中有多少列,每一列的标题是什么
        dataSource:决定了表格中展示什么数据
        scroll:允许表格滚动,当表格宽度超过设置的像素值后出现滚动条
        bordered:给表格添加边框
        */}
        <Table
          columns={columns}
          dataSource={hospitalSets}
          scroll={{ x: 1500 }}
          bordered
          style={{ marginTop: 20 }}
          // 这是在表格列表渲染过程中,会自动帮我们加key属性.值为id.意味着会自动从我们dataSource的数据对象中找到每一个对象的id属性的值作为key的值
          rowKey={'id'}
          //pagination——控制表格中分页器的样式的属性
          pagination={{
            total, //表示分页时总共有多少条数据
            current: page, //控制对应的页码高亮
            pageSize, //控制分页器一页有多少条数据
            showTotal() {
              return `总共:${total}条`
            },
            onChange(page, pageSize) {
              setPage(page)
              setPageSize(pageSize)
              fetch(page, pageSize)
            },
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: [2, 5, 10],
          }}
        />
      </div>
    </Card>
  )
}
